<template>
	<div class="role-list">
		<head-title title="信息--模板管理"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left"></div>
				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<search-view :option="optionList" @value="goSearch" @clear="refreshPage"></search-view>
					<div class="add"><el-button type="primary" @click="addCatalog(0)">添加</el-button></div>
				</div>
			</div>
            <p class="data-number">模板数：{{ total }}</p>
			<el-table :data="templatesList" border row-key="admin_role_id" :tree-props="{ children: 'children' }">
				<el-table-column label="ID" align="center" prop="template_id"></el-table-column>
				<el-table-column label="模板名称" align="center" prop="template_name"></el-table-column>
				<el-table-column label="添加时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="操作" align="center" width="280">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="edit(scope.row.template_id)">编辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.template_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
	</div>
</template>

<script>
import addTemplates from '@/components/layer-dialog/add-templates';
export default {
	data() {
		return {
            templatesList: [], // 角色列表
            optionList:[
                {
                    value:0,
                    label:"序号"
                },
                {
                    value:1,
                    label:"名称"
                }
            ],
            total:0,
            selectContent:"",
            classSelect:""
		};
	},
	methods: {
		// 初始化列表
		init() {
            let data = {}
            if(this.classSelect == 0){
                data.template_id = this.selectContent;
            }else if(this.classSelect == 1){
                data.template_name = this.selectContent;
            }
			this.$http(this.$ApiList.TemplateList,data).then(res => {
                this.templatesList = res.datas.data;
                this.total = res.datas.count;
			});
        },
        // 编辑模板
		edit(template_id) {
			this.$layer.iframe({
				title: '设置',
				maxmin: true,
				area: ['50%', '60%'],
				content: {
					content: addTemplates, //传递的组件对象
					parent: this, //当前的vue对象
					data: {
						template_id: template_id,
						type: 1
					} //props
				}
			});
        },
        // 添加模板
		addCatalog() {
			this.$layer.iframe({
				title: '设置',
				maxmin: true,
				area: ['50%', '60%'],
				content: {
					content: addTemplates, //传递的组件对象
					parent: this, //当前的vue对象
					data: {
						type: 0
					} //props
				}
			});
        },
        // 删除模板
		del(template_id) {
			let data = {
				template_id
			};
			this.$confirm('确定删除吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http(this.$ApiList.DelTemplate, data).then(res => {
						if (res.code == 200) {
							this.$layer.msg('删除成功');
							this.init();
						}
					});
				})
				.catch(() => {});
		},
		refreshPage() {
            this.selectContent = "";
            this.classSelect = ""
			this.init();
        },
        goSearch(type, value) {
            this.selectContent = value;
            this.classSelect = type;
            console.log(type);
            this.init();
		},
	},
	created() {
		this.init();
	}
};
</script>
<style lang="scss" scoped>

.role-list .menu-dialog .el-input {
	width: 90%;
}

.role-list .tree-view {
	max-height: 350px;
	overflow: overlay;
}

.role-list .el-tree-node__content {
	width: 100%;
}
</style>
